<style scoped>
.stopwatch{
  --progress-background: var(--color-primary);
}
.stopwatch{display: flex;flex-direction: column;align-items: center;position: fixed;top: 60%;right: 0;width: 66px;background: rgba(255,255,255,.8);padding: 3px;border-radius: 10px;overflow: hidden;transition: right .5s;}
.stopwatch.is_hidden{right: -56px;}
.stopwatch .icon{font-size: 46px;}
.progress{margin-top: 2px;width: 100%;height: 8px;border-radius: 4px;background: rgba(100,100,100,.5);}
.progress>.progress-inner{display: block;width: 0;height: 100%;border-radius: 4px;transition: width .8s linear;background: var(--progress-background);}
.text{width: 100%;font-size: 9px;text-align: center;}
</style>
<template>
  <div class="stopwatch" :class="{is_hidden:is_hidden}" v-show="is_show" @click="on_click">
    <IconImg class="icon" :value="icon"></IconImg>
    <p class="progress"><span class="progress-inner" :style="'width:'+progress_width+'%'"></span></p>
    <p class="text">
      <span v-if="is_over">浏览完成</span>
      <span v-else>浏览获得奖励</span>
    </p>
  </div>
</template>

<script>
import Stopwatch from "@/js/Stopwatch.js";
import {reactive} from "vue";
import {s94_event} from "@/js/s94_tool.js";
import IconImg from "@/components/widget/IconImg.vue";

const _this = reactive({
  is_show: false,
  callback(ac){},

  time: 0,
  icon: 'vant-icon gift',
  type: "", // 需要滚动才计时|need_scroll

  is_scroll: false, //是否正在滚动
  is_over: false, //是否计时完成
  is_hidden: false,

  surplus_time: 0, //剩余时间
  progress_width: 0, // 进度条宽度(0-100)

  stopwatch: new Stopwatch(),
})

function refresh_time(){
  let run = Math.round(_this.stopwatch/1000);
  _this.progress_width = Math.min(Math.round(run*100/_this.time), 100);
  _this.surplus_time = Math.max(_this.time - run, 0);

  if (_this.is_show) setTimeout(refresh_time, 500);
}
export function stopwatch(time, type, icon){
  _this.time = time || 15;
  _this.type = type || '';
  _this.icon = icon || 'vant-icon gift';

  _this.stopwatch.stop(); //清理之前的计时以及定时任务
  _this.stopwatch.setTimeout(()=>{
    _this.is_over = _this.is_hidden = true;
    _this.stopwatch.pause();

    _this.callback();
  }, _this.time*1000);

  if (_this.type !== 'need_scroll' || _this.is_scroll) _this.stopwatch.start();
  refresh_time();

  _this.is_show = true;
  return new Promise((resolve, reject)=>{
    _this.callback = resolve;
  })
}
stopwatch._this = _this;
stopwatch.hide = function(){
  _this.is_show = false;
  _this.stopwatch.stop();
}

s94_event('router.after', ()=>{
  _this.is_show = false;
  _this.stopwatch.stop();
})

if (typeof document == 'object'){
  let scroll_th;
  document.addEventListener("scroll", function (){
    if (scroll_th) clearTimeout(scroll_th);
    _this.is_scroll = true;
    scroll_th = setTimeout(()=>{ _this.is_scroll = false; },2500);
  })
}else {
  _this.is_scroll = true;
}

export default {
  components: {IconImg},
  data(){
    return _this
  },
  methods: {
    on_click(){
      if (!this.is_over) return;
      this.is_hidden = false;
      setTimeout(()=>{ this.is_hidden = this.is_over; }, 2000)
    }
  },
  watch: {
    is_scroll(v, oldV){
      if (!this.is_show || this.is_over || this.type !== 'need_scroll') return;
      if (v){
        this.stopwatch.start();
      }else {
        this.stopwatch.pause();
      }
    }
  },
  mounted() {
  }
}
</script>